<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css" />
	<link rel="stylesheet" href="__PUBLIC__/date/dist/css/calendar-price-jquery.min.css">
	<title>教务-班级管理-课程表</title>
</head>

<body>
	<form action="" class="layui-form">
		<div id="main" class="layui-container">
			<div class="header layui-row">
				<div class=" headerList">
					<i class="Educational_icon"></i>
					<span class="layui-breadcrumb" lay-separator=">">
						<a href="javascript:;">教务</a>
						<a href="javascript:;">班级管理</a>
						<a href="javascript:;">
							<cite>课程表</cite>
						</a>
					</span>
				</div>
			</div>
			<div class="main layui-row">
				<div class="layui-row main_header">
					<blockquote class="layui-elem-quote">课程表</blockquote>
				</div>
				<div class="layui-card" style="min-height: 500px;">
						<div class="layui-card-body addPadding">
								<form class="layui-form" action="" lay-filter="component-form-group">
										<div class=" layui-row" style="position: relative;">
												<div class=" layui-col-xs3" style="width: 30%;">
														<label class="layui-form-label">校区选择：</label>
														<div class="layui-input-block">
																<select name="campus" lay-verify="required" lay-filter="campus">
																		<option value="">请选择</option>
																		<foreach name="campus" item="c">
																			<option value="{$c.id}">{$c.name}</option>
																		</foreach>
																</select>
														</div>
												</div>
												<div class=" layui-col-xs3" style="width: 30%;">
														<label class="layui-form-label">班级选择：</label>
														<div class="layui-input-block">
																<select name="classroom"  id="classroom" lay-verify="required" lay-filter="classroom">
																</select>
														</div>
												</div>
												<div class=" layui-col-xs3" style="margin-left:50px;">
													<div style="float:left;margin-right: 50px;"><span class="layui-badge-dot layui-bg-blue" style="height:14px;width:14px;margin-right:10px;"></span>正常排课</div>
													<div style="float:left;"><span class="layui-badge-dot" style="height:14px;width:14px;margin-right:10px;"></span>冲突排课</div>
												</div>
										</div>
								</form>
						</div>
						<div class="container"></div>
				</div>
			</div>
		</div>
	</form>
	
<script src="__PUBLIC__/js/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/js/jquery.js"></script>
<script src="__PUBLIC__/date/demo/js/jquery-1.12.4.min.js"></script>
<!--<script src="../dist/js/calendar-price-jquery.min.js"></script>-->
<script src="__PUBLIC__/date/src/js/calendar-price-jquery.js"></script>
<script>
  function log (s) {
    console.log(s)
  }
</script>
<script>
	var form = layui.form, layer = layui.layer;
		form.on('select(campus)', function(data){
			var campus_id = data.value;
			$.post("{:U('Classsetting/campus')}",{campus_id:campus_id},function(data){
				$("#classroom").html("");
				if(data.length>0){
						$.each(data, function(key, val) {
						var option1 = $("<option>").val(val.id).text(val.classname);
											$("#classroom").append(option1);
											form.render('select');
									}); 
				$("#classroom").get(0).selectedIndex=0;
				}else{
					var option1 = $("<option>").val(0).text('没有可选班级');
										$("#classroom").append(option1);
										form.render('select');
				}
			},'json');

		})
function randNum (max) {
  return Math.round(Math.random() * max);
}

function fd (n) {
  n = n.toString();
  return n[1] ? n : '0' + n;
}
form.on('select(classroom)', function(data){
	var id = data.value;
	$.post("{:U('Classsetting/schedule_data')}",{id:id},function(data){
		console.log(data);
		var mockData = [];
		for (var i = 0; i <data.length; i++) {
			mockData.push({
				id: data[i].id,
				class_id: data[i].class_id,
				date: data[i].time,
				name: data[i].name,
				cname: data[i].cname,
				roomname: data[i].roomname,
				teacher_name: data[i].teacher_name,
				headmaster_name: data[i].headmaster_name,
				slot_name: data[i].slot_name,
				money: data[i].money,
				content: data[i].content
			});
		}
		//console.log(data);false;
	    // 日历设置表单字段配置
	    // key 字段名
	    // name 表单label
	    // value 默认值
	    // placeholder input[placeholder]
	    var calendarConfig = [
				{
					key: 'id',
					name: '',
					type: 'hidden'
				},
				{
					key: 'class_id',
					name: '',
					type: 'hidden'
				},
				{
					key: 'date',
					name: '上课日期'
				},
	      {
	        key: 'name',
	        name: '班级名称'
	      },
				{
					key: 'cname',
					name: '课程名称'
				},
				{
					key: 'roomname',
					name: '教室'
				},
				{
					key: 'teacher_name',
					name: '班主任'
				},
				{
					key: 'headmaster_name',
					name: '讲师'
				},
				{
					key: 'slot_name',
					name: '上课时间段'
				},
				{
					key: 'content',
					name: '班级简介'
				}
	    ]
	
	    // 日历中显示配置
	    var showConfig = [
				{
					key: 'name',
					name: ''
				},
	      {
	      	key: 'cname',
	      	name: ''
	      },
				{
					key: 'roomname',
					name: ''
				},
				{
					key: 'teacher_name',
					name: ''
				},
				{
					key: 'slot_name',
					name: '时间段：'
				}
	    ]
	
	    // 样式颜色配置
	    var styleConfig = {
	      // 头部背景色
	      headerBgColor: '#098cc2',
	      // 头部文字颜色
	      headerTextColor: '#fff',
	      // 周一至周日背景色，及文字颜色
	      weekBgColor: '#098cc2',
	      weekTextColor: '#fff',
	      // 周末背景色，及文字颜色
	      weekendBgColor: '#098cc2',
	      weekendTextColor: '#fff',
	      // 有效日期颜色
	      validDateTextColor: '#333',
	      validDateBgColor: '#fff',
	      validDateBorderColor: '#eee',
	      // Hover
	      validDateHoverBgColor: '#098cc2',
	      validDateHoverTextColor: '#fff',
	      // 无效日期颜色
	      invalidDateTextColor: '#ccc',
	      invalidDateBgColor: '#fff',
	      invalidDateBorderColor: '#eee',
	      // 底部背景颜色
	      footerBgColor: '#fff',
	      // 重置按钮颜色
	      resetBtnBgColor: '#77c351',
	      resetBtnTextColor: '#fff',
	      resetBtnHoverBgColor: '#55b526',
	      resetBtnHoverTextColor: '#fff',
	      // 确定按钮
	      confirmBtnBgColor: '#098cc2',
	      confirmBtnTextColor: '#fff',
	      confirmBtnHoverBgColor: '#00649a',
	      confirmBtnHoverTextColor: '#fff',
	      // 取消按钮
	      cancelBtnBgColor: '#fff',
	      cancelBtnBorderColor: '#bbb',
	      cancelBtnTextColor: '#999',
	      cancelBtnHoverBgColor: '#fff',
	      cancelBtnHoverBorderColor: '#bbb',
	      cancelBtnHoverTextColor: '#666'
	    }
	
	    // 初始化日历
	    var zxCalendar = $.CalendarPrice({
	      el: '.container',
	      // startDate: '2017-08-02',
	      endDate: '',
	      data: mockData,
	      // 配置需要设置的字段名称
	      config: calendarConfig,
	      // 配置在日历中要显示的字段
	      show: showConfig,
	      // 自定义颜色
	      style: styleConfig
	    });
	
	    //log(zxCalendar)
	
	    // 监听设置表单提交
	    // 将阻止默认流程执行
	    // 继续执行默认流程，请执行参数next()
	    zxCalendar.$on('submit-form', function (data, next) {
	      // data 设置的数据
	      console.log('$(submit-form)表单数据 ================')
	      console.log(data)
	
	      // 此处可以验证表单
	      // 验证表单逻辑....
	      // ....
	
	      // 继续执行下一步
	      next()
	    })
	
	    // 执行过程中错误回调
	    zxCalendar.$on('error', function (err) {
	      // 执行中的错误提示
	      console.error('$on(error)Error:')
	      console.log(err)
	      alert(err.msg);
	    })
	
	    // 切换月份
	    zxCalendar.$on('month-change', function (data) {
	      log('$on(month-change) 数据：');
	      log(data);
	    })
	
	    // 点击有效的某一天通知
	    zxCalendar.$on('valid-day', function (day, data, next) {
	      log('$on(valid-day)当前点击的(有效)日期为: ' + day + ', 数据：');
	      log(data);
				if(data.id){
					window.location.href="{:U('Classsetting/schedule_show')}?id="+data.id;
				}
	      // 继续执行默认流程
	    })
	
	    // 设置数据变化
	    zxCalendar.$on('setup-value-change', function (data) {
	      log('$on(setup-value-change)设置窗口被修改数据....');
	      log(data);
	      // 取消设置
	      // 这里可以触发关闭设置窗口
	    })
	
	    // 点击重置按钮回调
	    zxCalendar.$on('reset', function () {
	      log('$on(reset)数据重置成功！');
	    })
	
	    // 点击确定按钮回调，返回当前设置数据
	    zxCalendar.$on('confirm', function (data) {
	      log('$on(confirm)点击确定按钮通知！');
	      log(data);
	    })
	
	    // 点击取消按钮回调
	    zxCalendar.$on('cancel', function () {
	      log('$on(cancel)取消设置 ....');
	      // 取消设置
	      // 这里可以触发关闭设置窗口
	    })
	})

})
</script>
</body>

</html>
